<template>
	<view class="payment-pages">
		<view class="payment u-skeleton">
			<!-- Header -->
			<view class="payment-header">
				<price-format class="u-skeleton-fillet" :subscript-size="40" :first-size="56" :second-size="40"
					:price="amount" :weight="500" />
				<template v-if="timeout > 0">
					<view class="payment-count-down">
						<text>支付剩余时间</text>
						<u-count-down :timestamp="timeout" :font-size="22" />
					</view>
				</template>
			</view>

			<!-- Main -->
			<view class="payment-main">
				<view class="payway-container u-skeleton-fillet">
					<!-- Payway -->
					<u-radio-group v-model="payway" style="width: 100%">
						<view class="payway">
							<view class="payway-item" v-for="(item, index) in paywayList" :key="item.id"
								@click="changePayway(item.pay_way)">
								<u-image :src="item.icon" width="48" height="48" mode="scaleToFill" />
								<view class="payway-item-content">
									<text class="payway-item-content-name">{{ item.name }}</text>
									<text class="payway-item-content-tips">{{ item.extra }}</text>
								</view>
								<u-radio shape="circle" :name="item.pay_way" :active-color="primaryColor" />
							</view>
						</view>
					</u-radio-group>
					<template v-if="!paywayList.length">
						<view class="payway-empty">暂无支付方式</view>
					</template>
				</view>
			</view>

			<!-- Footer -->
			<view class="payment-footer u-skeleton-fillet">
				<view :class="['payment-submit', { 'payment-submit--disabled': loadingPay }]" @tap="handlePrepay">
					<u-loading mode="circle" :show="loadingPay" />
					<text v-show="!loadingPay">立即支付</text>
				</view>
			</view>
			<u-popup v-model="Alipayshow" mode="bottom" height="600rpx" safe-area-inset-bottom border-radius="20"
				closeable @close="handleclose">
				<view class="Alipay">
					<view style="margin-top: 50rpx">
						<price-format class="" :price="amount" :firstSize="48" :secondSize="48" :showSubscript="true"
							:subscriptSize="48" />
					</view>
					<view class="flex row-between" style="width: 100%; margin-top: 50rpx">
						<text class="bold">支付方式</text>
						<text class="bold">支付宝</text>
					</view>
					<view class="" style="
                            width: 100%;
                            background-color: #f7f7f7;
                            margin: 50rpx 0;
                            padding: 20rpx;
                        ">请复制链接,粘贴至浏览器并支付</view>
					<button class="btn" @click="$copy(key)">复制链接</button>
				</view>
			</u-popup>
		</view>

		<u-skeleton :loading="loadingSkeleton" :animation="true" bgColor="#FFF" />
	</view>
</template>

<script>
	/**
	 * @description 支付页面
	 * @query {String} from 订单来源: order-商品订单; recharge-充值订单;
	 * @query {Number} order_id	订单ID
	 */
	import {
		prepay,
		getPayway
	} from '@/api/app'
	import {
		wxpay,
		alipay
	} from '@/utils/pay'
	import {
		getUserInfo
	} from '@/api/user'
	import store from '@/store'
	import {
		getOrderDetail
	} from '@/api/order'

	export default {
		name: 'Payment',

		data() {
			return {
				from: '', // 订单来源
				order_id: '', // 订单ID
				amount: 0, // 支付金额
				timeout: 0, // 倒计时间戳
				payway: '', // 支付方式
				paywayList: [], // 支付方式列表
				Alipayshow: false,
				loadingSkeleton: true, // 骨架屏Loading
				loadingPay: false, // 支付处理中Loading
				userInfo: {},
				key: '',
				buyout: '', //买断
			}
		},

		methods: {
			// 更改支付方式
			changePayway(value) {
				this.$set(this, 'payway', value)
			},

			// 初始化页面数据
			initPageData(isZhimaOrder) {
				// 获取支付方式
				getPayway({
						from: this.from,
						order_id: this.order_id,
						is_zhima_order: isZhimaOrder
					})
					.then((res) => {
						if (res.code != 1) throw new Error(res.msg)
						return res.data
					})
					.then((data) => {
						this.loadingSkeleton = false
						this.amount = data.order_amount
						this.paywayList = data.pay
						this.payway = this.paywayList[0]?.pay_way
						// 倒计时
						const startTimestamp = new Date().getTime() / 1000
						const endTimestamp = data.cancel_time * 1
						this.timeout = endTimestamp - startTimestamp
					})
					.catch((err) => {
						throw new Error(err)
					})
			},
			//支付宝弹窗关闭(查询支付结果)
			handleclose() {
				this.queryPayResult()
					.then((result) => {
						result ? this.handPayResult('success') : this.handPayResult('fail')
					})
					.catch((errMsg) => this.handPayResult('fail'))
			},
			// 查询支付结果
			queryPayResult() {
				return new Promise((resolve, reject) => {
					getOrderDetail(this.order_id).then((res) => {
						if (res.data.pay_status == 1) {
							resolve(true)
						} else {
							reject(false)
						}
					})
				})
			},
			// 预支付处理
			handlePrepay() {
				if (this.loadingPay) return
				this.loadingPay = true
				// #ifdef MP-WEIXIN
				if (this.userInfo.mnp_auth == 0 && this.payway == 1) {
					uni.showModal({
						content: '当前账号未微信授权，请前往个人设置授权',
						confirmText: '前往授权',
						success: ({
							confirm
						}) => {
							if (confirm) {
								uni.navigateTo({
									url: '/bundle/pages/user_profile/user_profile'
								})
							}
						}
					})
				}
				// #endif
				// #ifdef H5
				if (this.userInfo.oa_auth == 0 && this.payway == 1) {
					uni.showModal({
						content: '当前账号未微信授权，请前往个人设置授权',
						confirmText: '前往授权',
						success: ({
							confirm
						}) => {
							if (confirm) {
								uni.navigateTo({
									url: '/bundle/pages/user_profile/user_profile'
								})
							}
						}
					})
					return (this.loadingPay = false)
				}

				// #endif


				prepay({
						from: this.from,
						order_id: this.order_id,
						pay_way: this.payway
					})
					.then(({
						code,
						data
					}) => {
						switch (code) {
							case 1:
								this.handleWechatPay(data)
								break
							case 10001:
								this.handleAlipayPay(data)
								break
							case 20001:
								this.handleWalletPay()
								break
						}
					})
					.catch((err) => {})
					.finally(() => {
						setTimeout(() => {
							this.loadingPay = false
						}, 500)
					})
			},

			// 微信支付
			handleWechatPay(data) {
				wxpay(data).then((res) => {
					this.handPayResult(res)
				})
			},

			// 支付宝支付
			handleAlipayPay(data) {

				// #ifdef H5
				uni.$on('Alipay', () => {
					this.Alipayshow = true
				})
				alipay(data).then((res) => {
					this.handPayResult(res)
				});
				// #endif

				// #ifdef MP-ALIPAY
				const tradeNo = data?.data?.trade_no;
				my.tradePay({
					// 调用统一收单交易创建接口（alipay.trade.create），获得返回字段支付宝交易号trade_no
					tradeNO: tradeNo,
					success: (res) => {
						console.log('success', res)
						if (res.resultCode == 9000) {
							this.handPayResult('success')
						} else {
							this.handPayResult('fail')
						}
					},
					fail: (res) => {
						console.log('fail', res)
						this.handPayResult('fail')
					}
				});
				// #endif
			},

			// 钱包余额支付
			handleWalletPay() {
				//余额支付成功
				this.handPayResult('success')
			},

			// 支付后处理
			handPayResult(result) {
				console.log(this.from,'from')
				if (this.from == 'buyup') {
				
					if (result == 'success') { //买断成功跳转
						uni.redirectTo({
							url: '/bundle/pages/lease_bill/laase_bill_buyout?id='+this.order_id
						});

					} else {
						uni.redirectTo({
							url: '/pages/pay_result/pay_result?from=' + this.from + '&id=' + this.order_id
						});
					}
				} else {
					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/pay_result/pay_result?from=' + this.from + '&id=' + this.order_id
						});
					}, 500)
				}
			}
		},

		async onLoad(options) {
            this.from=options.from
			const from = options.from
			const order_id = options.order_id
	
			try {
				if (!from && !order_id) throw new Error('页面参数有误')
				this.from = from
				this.order_id = order_id
				this.initPageData(options.is_zhima_order ?? false)
			} catch (err) {
				console.log(err)
				uni.navigateBack()
			}
			getUserInfo().then((res) => {
				if (res.code == 1) {
					this.userInfo = res.data
				}
			})
		},

		onUnload() {
			// this.handPayResult('fail')
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		padding: 0;
	}

	.payment-pages {
		height: 100%;

		.payment {
			display: flex;
			flex-direction: column;
			height: calc(100% - env(safe-area-inset-bottom));

			&-header {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				height: 300rpx;
				background: linear-gradient(270deg, #ff2c3c 0%, #f95f2f 100%);
				color: #ffffff;
			}

			&-main {
				flex: 1;
				margin-top: -40rpx;
				padding: 0 20rpx;
				overflow: hidden;
			}

			&-footer {
				display: flex;
				align-items: center;
				height: 100rpx;
				padding: 0 20rpx;
				background-color: #ffffff;
			}

			.payway-container {
				padding: 0 20rpx;
				border-radius: 7px;
				background-color: #ffffff;

				.payway-empty {
					display: flex;
					justify-content: center;
					padding: 20rpx 0;
					font-size: 26rpx;
					color: $-color-muted;
				}
			}

			.payway {
				width: 100%;

				&-item {
					width: 100%;
					display: flex;
					align-items: center;
					height: 120rpx;

					&:nth-child(n + 2) {
						border-top: $-dashed-border;
					}

					&-content {
						flex: 1;
						display: flex;
						flex-direction: column;
						margin-left: 16rpx;

						&-name {
							font-size: 28rpx;
							color: $-color-black;
						}

						&-tips {
							font-size: 22rpx;
							color: $-color-muted;
						}
					}
				}
			}

			&-count-down {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 7rpx 25rpx;
				border-radius: 60px;
				margin-top: 10rpx;
				font-size: 22rpx;
				background-color: #ffffff;
				color: $-color-normal;
			}

			&-submit {
				flex: 1;
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 74rpx;
				font-size: 28rpx;
				border-radius: 60px;
				background: linear-gradient(270deg, #ff2c3c 0%, #f95f2f 100%);
				color: #ffffff;

				&--disabled::before {
					position: absolute;
					top: 0;
					bottom: 0;
					left: 0;
					right: 0;
					height: 100%;
					display: block;
					content: '';
					background: rgba(255, 255, 255, 0.3) !important;
				}
			}
		}
	}

	.Alipay {
		padding: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		.btn {
			background-color: #4073fa;
			border-radius: 12rpx;
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 28rpx;
			color: white;
		}
	}
</style>